<template>
	<view>
		<view class="content">
			<view class="accountInfo">
				<view class="item" v-for="(item,index) in userInfo" :key="index">
					<view class="user_list">
					<view class="user_info">
						<view class="user_img"><image :src="item.img" class="avatar"></image></view>
						<view class="user_dev">
							<view class="user_name_line">{{item.name}}</view>
							<view class="user_account_line">{{item.id}}</view>
						</view>
					</view>
					<view class="user_status" :class='item.status == 0?"status_red":"status_green"'>{{item.status==0?'失效':'正常'}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog" mask-click>
			<uni-popup-dialog mode="input" type="info" cancelText="关闭" confirmText="同意" title="添加账号" content="" @confirm="dialogConfirm">
				<uni-forms ref="form" :modelValue="formData">
					<uni-forms-item label="账号地址" name="share_url" label-width='90'>
						<uni-easyinput   type="text" v-model="formData.share_url" placeholder="请输入账号" @blur="accountGrab()" />
					</uni-forms-item>
					<uni-card :title="formData.name" :sub-title="formData.account" :thumbnail="formData.img">
					</uni-card>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	
	import {
		accountGrab,
		accountRegister,
		accountList
	} from '@/api/api';
	export default {
		data() {
			return {
				userInfo:[{
					img:'/static/images/f.png',
					name:'未登录',
					id:0,
					status:1
				}],
				formData:{
					share_url:"",
					platform:1,
					img:"",
					name:"",
					account:""
				},
				
			}
		},
		onLoad() {
			this.accountList()
		},
		methods: {
			onNavigationBarButtonTap(e) {
				this.$refs.popup.open()
			},
			// 获取分享链接信息
			accountGrab:function(item){
			
				console.log(this.formData.share_url)
				accountGrab({share_url:this.formData.share_url ,platform:1}).then(res=>{
					console.log(res)
					if(res.code==200){
						this.formData.img=res.data.img;
						this.formData.name=res.data.name;
						this.formData.account=res.data.account;
					}
				}).catch(err =>{
					console.log('账号请求失败', err);
				})
			},
			//添加账号信息
			dialogConfirm(){
				accountRegister(this.formData).then(res=>{
					console.log(res)
				})
			},
			//获取账号列表
			accountList(){
				accountList().then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color:#fff;
	}
	.accountInfo{
		width: 100%;
	}
	.user_list{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 30rpx 20rpx;
		border-bottom: #f5f5f5 2rpx solid;
	}
	.avatar{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.user_info{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.user_dev{
		padding-left:40rpx ;
	}
	.user_name_line{
		font-size: 30rpx;
	}
	.user_account_line{
		font-size: 28rpx;
		color:#8f8f8f;
		margin-top: 10rpx;
	}
	.user_status{
		font-size: 24rpx;
		padding: 5rpx 20rpx;
		border-radius: 10rpx;
	}
	.status_green{
		background-color: #a9d3a9;
		color:green;
	}
	.status_red{
		background-color: #d3a9af;
		color:red;
	}
	/deep/.uni-card__content{
		display: none;
	}
	/deep/.uni-card{
		padding: 0!important;
		margin: 0!important;
	}
	/deep/.uni-forms-item{
		margin-bottom: 15px;
	}
</style>
